<template>
  <div class='main_box' id='map_view'></div>
</template>

<script>
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
import Graphic from "@arcgis/core/Graphic";
import PopupTemplate from "@arcgis/core/PopupTemplate"

export default {
  name: 'ArcGisMap',
  data(){
    return{
    }
  },
  methods: {
    setHoverEvent(map,view,gLayer,Point){
      // mouseon要更换
      let mouseOn = view.on('click', function (event) {//在MapView中添加 鼠标监控事件
        view.hitTest(event).then((res) => {
          if (res.results.length) {
            let results = res.results.filter((result) => { // 检查图形是否属于感兴趣的图层
              return result.graphic.layer.id === gLayer.id
            })
            if (results.length > 0) {
              let g = results[0].graphic
              let geo = g.geometry
              let point = new Point(geo.x, geo.y, view.spatialReference)
              view.popup.open({
                location: point,
                title: '标题',
                content: '内容，html格式'
              })
            }
          } else {
            view.popup.close()
          }
        })
      })
      gLayer.on('layerview-destroy', function (event) {//当该图形图层关闭时移除该鼠标监控事件
        mouseOn.remove()
      })
    },
    addLineToMap(map,view){
      const that = this
      let gLayer = new GraphicsLayer({  // 管线图层，这个要更换
        title: 'polyline'
      });
      const trunkLines = [
        {
          name: "成都干线",
          pipelines: [
            {
              id: '4',
              name: '雅安站-眉山站',
              start: '雅安站',
              end: '眉山站',
              corrode: 123,
              crack: 123,
              length: 12321,
              coordinate: [[103.847329, 30.086563],[103.028848, 30.010484]]
            },
            {
              id: '5',
              length: 22321,
              corrode: 123,
              crack: 123,
              start: '眉山站',
              end: '资阳站',
              name: '眉山站-资阳站',
              coordinate: [[103.028848, 30.010484],[104.638345, 30.129331]]
            }, {
              id: '6',
              length: 32321,
              start: '资阳站',
              corrode: 123,
              crack: 123,
              end: '遂宁站',
              name: '资阳站-遂宁站',
              coordinate: [[104.638345, 30.129331],[105.605142, 30.508678]]
            }, {
              id: '7',
              length: 32321,
              corrode: 123,
              crack: 123,
              start: '遂宁站',
              end: '绵阳',
              name: '遂宁站-绵阳站',
              coordinate: [[105.605142, 30.508678],[104.698769, 31.445887]]
            }
          ]
        },
        {
          name: "重庆干线",
          pipelines: [
            {
              id: '1',
              length: 14321,
              start: '江津区',
              corrode: 123,
              crack: 123,
              end: '涪陵区',
              name: '江津区-涪陵区',
              coordinate: [[106.261575,29.270467],[107.338235,29.705588]]
            },{
              id: '2',
              corrode: 123,
              crack: 123,
              length: 2321,
              start: '涪陵区',
              end: '合川区',
              name: '涪陵区-合川区',
              coordinate: [[107.338235,29.705588],[106.311013,29.953387]]
            },{
              corrode: 123,
              crack: 123,
              id: '3',
              length: 9921,
              start: '合川区',
              end: '璧山区',
              name: '合川区-璧山区',
              coordinate: [[106.311013,29.953387],[106.300027,29.643543]]
            }
          ]
        }
      ]
      for(let trunkLine of trunkLines){
        for(let pipeline of trunkLine.pipelines){
          let line={
            type:"polyline",
            paths: pipeline.coordinate,
            spatialReference: view.spatialReference
          }
          let lGraphic = new Graphic({
            geometry: line,
            symbol: {
              type: "simple-line",
              color: [4, 90, 141],
              width: 4,
              cap: "round",
              join: "round"
            },
            attributes: {
              name: pipeline.name,
              pipelineId: pipeline.id,
              start: pipeline.start,
              end: pipeline.end,
              length: pipeline.length,
              crack: pipeline.crack,
              corrode: pipeline.corrode
            },
            popupTemplate: {
              title: "{name}",
              content: function populationChange(feature){
                const div = document.createElement("div");
                div.innerHTML =
                  "<table class='esri-widget__table'>" +
                  "<tbody>" +
                  "<tr>" +
                  "<th class='esri-feature-table__header'>起点站</th>" +
                  "<td class='esri-feature-table__content'>"+feature.graphic.attributes.start +"</td>" +
                  "</tr>" +
                  "<tr>" +
                  "<th class='esri-feature-table__header'>终点站</th>" +
                  "<td class='esri-feature-table__content'>"+feature.graphic.attributes.end +"</td>" +
                  "</tr>" +
                  "<tr>" +
                  "<th class='esri-feature-table__header'>管段长度</th>" +
                  "<td class='esri-feature-table__content'>"+feature.graphic.attributes.length +"千米</td>" +
                  "</tr>" +
                  "<tr>" +
                  "<th class='esri-feature-table__header'>缺陷个数</th>" +
                  "<td class='esri-feature-table__content'>"+feature.graphic.attributes.corrode +"个</td>" +
                  "</tr>" +
                  "<tr>" +
                  "<th class='esri-feature-table__header'>裂纹个数</th>" +
                  "<td class='esri-feature-table__content'>"+feature.graphic.attributes.crack +"个</td>" +
                  "</tr>" +
                  "</tbody>" +
                  "</table>"+
                  "<a href='#/defect?pipelineId="+feature.graphic.attributes.pipelineId+"' style='color: red'>详情</a>"
                return div;
              }
            }
          })
          gLayer.graphics.add(lGraphic)
        }
      }
      map.add(gLayer) // 地图中加入图层

    },
    //创建地图
    _createMapView: function() {
      let that = this
      let map = new Map({    //实例化地图
        basemap: "satellite"
      });
      that.arcMap = map
      const view = new MapView({   //实例化地图视图
        container: "map_view",
        map: map,
        zoom: 8,
        center: [104.072044,30.663776],
        popup: {
          defaultPopupTemplateEnabled: true
        }
      });
      view.ui.components = [];
      that.addLineToMap(map,view)
    },
  },
  mounted () {
    this._createMapView();
  }

}
</script>

<style lang='scss' scoped>
@import 'https://js.arcgis.com/4.23/esri/themes/dark/main.css';
.main_box{
  padding: 0;
  margin: 0 auto;
  height: 100%;
  width: 100%;
}
</style>
